<template>
    <div>
    <!-- <h1>收费统计</h1> -->
    <div class="container "> 
        <h2>收费统计</h2>
        <el-divider></el-divider>
        <el-form    class="form-demo">
            <el-form-item label="统计时段">
          <el-radio-group v-model="form.time">
            <el-radio value="month">月</el-radio>
            <el-radio value="season">季</el-radio>
            <el-radio value="year">年</el-radio>
          </el-radio-group>
        </el-form-item>
         <el-form-item label="查找年份" v-if="form.time!='year'">
          <el-select v-model="form.year" placeholder="选择年份" placement="top-start">
              <el-option
                v-for="year in yearRange"
                :key="year"
                :label="year"
                :value="year" />
              </el-select>
        </el-form-item>
        <el-row v-else>
            <el-col :span="12">
                    <el-form-item label="开始年份">
                  <el-select v-model="form.startYear" placeholder="选择年份">
                   <el-option
                            v-for="year in yearRange"
                            :key="year"
                            :label="year"
                            :value="year">
                            </el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="结束年份">
                  <el-select v-model="form.endYear" placeholder="选择年份">
                    <el-option
                            v-for="year in yearRange"
                            :key="year"
                            :label="year"
                            :value="year"
                            :disabled="year < form.startYear">
                            </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="bindConfirm">统计</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
        </el-form>
    </div>

    <div ref="chartDom" style="height: 400px; " :class="chartClass"  ></div>
    </div>
</template>

<script setup>
import { ref, reactive, computed,onUpdated, onMounted, onBeforeMount,onUnmounted, nextTick } from 'vue'
import {statisticsCharge} from '@/api/statistic'
import * as echarts from 'echarts'
import useYear from '@/hooks/useYear'//
const form  =reactive({
    time:'month',
    year:'2021',
    startYear:'2021',
    endYear:'2024'
})
//动态生成年份
const {yearRange} = useYear()
// 绘制统计图
const chartDom = ref()
//绘制课程统计
const option = reactive({
    // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
   title: {
        text: ''
    },
    tooltip: {},
    legend: {
        data: ['收费']
    },
    xAxis: {
        name: "月",
        data: []  //["1月","2月","3月","4月","5月","6月"]
    },
    yAxis: {
        name: "收费金额"
    },
    series: [{
        name: '收费',
        type: 'bar',
        data: []    //[5, 20, 36, 10, 10, 20]
    }, {
        name: '收费',
        type: 'line',
        data: []     //data: [5, 20, 36, 10, 10, 20]
    }
    ]
})
let chartInstance = null   
 onMounted(async() => {
    await nextTick()
    setTimeout(()=>{
        //   console.log('=======cardCostList========', chartDom.value)
        if (chartDom.value) {
            chartInstance = echarts.init(chartDom.value)
        }
    },1000) // 确保DOM已经渲染完成
  
})   
// 销毁ECharts实例
onUnmounted(() => {
    console.log("销毁-----sdf----")
    if (chartInstance != null && chartInstance.dispose) {
        chartInstance.dispose();
    }
})
window.onresize = function () {
    chartInstance.resize();
}
const  bindConfirm =()=>{
   chartClass.value = 'mt20'
    //展示统计的列表
    //按照年月分配
    statisticsCharge(form).then(res=>{
        console.log(res)
        const info  = res.data.data
        option.title.text = info.title;
        option.xAxis.data = info.time;
        option.xAxis.name = info.xname;
        option.series[0].data = info.data;
        option.series[1].data = info.data;
        chartInstance.setOption(option)
    }) 
}
//取消按钮  class属性绑定 当点击取消的时候 设置图标不显示
const chartClass = ref('mt20')
const cancel=()=>{
    form.year="2021"
    form.time="month"
    chartClass.value='mt20 d'
}
</script >
<style lang="less" scoped>
.mt20{
   margin-top: 20px;
}
.d{
    display: none;
}
.form-demo{
    width: 70%;
    padding-left: 10%;
}
.form-demo .el-select{
    width:200px;
}
</style>
